<template>
    <el-card>
        <div slot="header">{{title()}}</div>
        <el-form label-width="100px" :model="form" :rules="rules" ref="form">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title"/>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="form.content"/>
            </el-form-item>
            <el-form-item label="发送给" prop="users" v-if="form.type === 0">
                <project_search_user v-model="form.users" @change="change" :multiple="true"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="submit" type="primary" :loading="loading">发送</el-button>
            </el-form-item>
            <el-form-item>
                <my-alert ref="alert"/>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    import MyAlert from "../component/my_alert";
    import Project_search_user from "../component/project_search_user";

    export default {
        components: {
            Project_search_user,
            MyAlert
        },
        data() {
            return {
                loading: false,
                searchUser: {loading: false, options: []},
                form: {
                    title: '',
                    content: '',
                    type: this.$route.path.match(/new_notify$/) ? 1 : 0,
                    users: [],
                },
                rules: {
                    title: [{required: true, trigger: 'blur', message: '请填入标题'}],
                    content: [{required: true, trigger: 'blur', message: '请填入标题'}],
                    users: [{
                        required: true,
                        trigger: 'blur',
                        validator: (rule, value, callback) => {
                            if (this.form.type === 1)
                                return callback();
                            if (this.form.users.length === 0)
                                return callback(new Error('请选择要发送给谁'));
                            callback();
                        }
                    }],
                },
            };
        },
        methods: {
            title() {
                return this.form.type ? '发公告' : '发送短消息';
            },
            submit() {
                this.$refs['form'].validate(valid => {
                    if (!valid) return;
                    this.loading = true;
                    let url = this.form.type === 1 ? '/api/notify' : '/api/message';
                    this.$http.post(url, this.form)
                        .then(res => {
                            this.$message.success('发送成功');
                            if (this.form.type === 1)
                                this.$router.push('/notify');
                            else
                                this.$router.push('/message');
                        })
                        .catch(err => {
                            this.loading = false;
                            this.$refs.alert.error(err.response.data);
                        });
                });
            },
        },
    }
</script>

<style scoped>

</style>